<template>
  <div class="list">
    <Content title="美食">
        <!-- 
        在组件的标签内部书写的内容就是插入给组件内部的插槽内容
       -->
       <img src="http://www.atguigu.com/images/index_new/logo.png" alt="">
    </Content>
    <Content title="电影">
      <ul>
        <li>鸭王</li>
        <li>肉蒲团</li>
        <li>极乐宝鉴</li>
      </ul>
    </Content>
    <Content title="游戏">
      <ol>
        <li>大表哥2</li>
        <li>给他爱</li>
        <li>战地</li>
      </ol>
    </Content>
  </div>
  
</template>

<script>
import Content from './components/Content'
export default {
name:"App",
components:{
  Content
},
data(){
  return {
      list: [
        { id: 1, title: "美食", detail: ["火锅", "烤肉", "烧烤", "面条"] },
        { id: 2, title: "旅游", detail: ["西安", "深圳", "厦门", "武汉"] },
        { id: 3, title: "游戏", detail: ["DNF", "DOTA", "红警", "CS1.4"] },
      ],
    };
}
}
</script >

<style scoped>

.list {
  display: flex;
  justify-content: space-between;
}
</style>